<!-- 搜索表单 -->
<div class="layui-form"
    style="margin-bottom: 15px; padding: 15px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid #e6e6e6;">
    <div class="layui-form-item" style="margin-bottom: 0;">
        <div class="layui-input-inline" style="width: 320px;">
            <input type="text" id="searchKeyword" placeholder="请输入商品名称或描述" class="layui-input"
                style="border-radius: 4px; border-color: #dcdfe6; transition: all 0.3s;">
        </div>
        <div class="layui-input-inline" style="width: auto;">
            <button class="layui-btn layui-btn-normal" id="searchBtn"
                style="border-radius: 4px; padding: 0 20px;">搜索</button>
        </div>
        <div class="layui-input-inline" style="width: auto;">
            <button class="layui-btn layui-btn-primary" id="resetBtn"
                style="border-radius: 4px; padding: 0 20px;">重置</button>
        </div>
    </div>
</div>

<script>
    /**
     * 搜索商品功能初始化
     * @param {Object} $ - jQuery 实例
     * @param {Object} productTable - 商品表格实例
     * @param {Object} form - layui form 实例
     */
    function searchProductInit($, productTable, form) {
        // 防抖函数
        function debounce(fn, delay) {
            let timer = null;
            return function () {
                const context = this;
                const args = arguments;
                clearTimeout(timer);
                timer = setTimeout(() => {
                    fn.apply(context, args);
                }, delay);
            };
        }

        // 搜索处理函数
        function doSearch() {
            var keyword = $('#searchKeyword').val().trim();

            // 空输入框错误提示
            if (!keyword) {
                layer.msg('请输入搜索关键词', {
                    icon: 2,
                    time: 2000
                });
                return;
            }

            // 重新加载表格数据
            productTable.reload({
                where: {
                    "keyword": keyword,
                    "page": 1,
                    "page_size": 10,
                    "uid": userInfo.uid
                },
                page: {
                    curr: 1 // 重新从第1页开始
                }
            });
        }

        // 重置后直接重新加载表格
        function resetAndReload() {
            $('#searchKeyword').val('');
            form.render();

            // 直接重新加载表格数据
            productTable.reload({
                where: {
                    "keyword": '',
                    "page": 1,
                    "page_size": 10,
                    "uid": userInfo.uid
                },
                page: {
                    curr: 1 // 重新从第1页开始
                }
            });
        }

        // 创建防抖处理的搜索函数
        const debouncedSearch = debounce(doSearch, 300);

        // 绑定搜索按钮点击事件
        $('#searchBtn').click(function () {
            doSearch();
        });

        // 绑定重置按钮点击事件
        $('#resetBtn').click(function () {
            resetAndReload();
        });

        // 绑定回车键搜索
        $('#searchKeyword').on('keydown', function (e) {
            if (e.keyCode === 13) {
                doSearch();
            }
        });

        // 绑定输入框变化事件（带防抖）
        $('#searchKeyword').on('input', debouncedSearch);
    }
</script>
<!-- 购买商品模块 -->
{% include "页面/商品/购买商品.html" %}
<!-- 商品操作栏 -->
<script type="text/html" id="productBar">
    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="update">更新</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="purchase">购买</button>
</script>

<script>
    /**
     * 商品操作栏初始化
     * @param {Object} table - layui table 实例
     * @param {Object} form - layui form 实例
     * @param {Object} layer - layui layer 实例
     * @param {Object} laydate - layui laydate 实例
     * @param {Object} $ - jQuery-$ 实例
     * @param {Object} upload - layui upload 实例
     */
    function productBarInit(table, form, layer, laydate, $, upload) {
        // 监听表格行工具事件
        table.on('tool(productTable)', function (obj) {
            var data = obj.data; // 获得当前行数据
            var layEvent = obj.event; // 获得 lay-event 对应的值
            console.log(layEvent);
            

            if (layEvent === 'update') {
                // 更新商品
                updateProductFunc(data, table, form, layer, $, upload);
            } else if (layEvent === 'delete') {
                // 删除商品
                deleteProductFunc(data, table, layer);
            } else if (layEvent === 'purchase') {
                // 购买商品
                openPurchasePopup(data, table, form, layer, $);
            }
        });
    }

    /**
     * 更新商品功能函数
     * @param {Object} data - 当前商品数据
     * @param {Object} table - layui table 实例
     * @param {Object} form - layui form 实例
     * @param {Object} layer - layui layer 实例
     * @param {Object} $ - jQuery 实例
     * @param {Object} upload - layui upload 实例
     */
    function updateProductFunc(data, table, form, layer, $, upload) {
        // 创建表单HTML
        var formHtml = `
        <form class="layui-form" style="padding: 20px;" lay-filter="updateProductForm">
            <div class="layui-form-item">
                <label class="layui-form-label">商品ID</label>
                <div class="layui-input-block">
                    <input type="text" name="pid" value="${data.pid}" readonly class="layui-input layui-disabled">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="${data.name || ''}" required lay-verify="required" placeholder="请输入商品名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品描述</label>
                <div class="layui-input-block">
                    <textarea name="description" required lay-verify="required" placeholder="请输入商品描述" class="layui-textarea">${data.description || ''}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品积分</label>
                <div class="layui-input-block">
                    <input type="number" name="points" value="${data.points || 0}" required lay-verify="required|number" placeholder="请输入商品积分" class="layui-input" min="0">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品库存</label>
                <div class="layui-input-block">
                    <input type="number" name="stock" value="${data.stock || 0}" required lay-verify="required|number" placeholder="请输入商品库存" class="layui-input" min="0">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品封面图</label>
                <div class="layui-input-block">
                    <input type="text" name="cover_url" id="updateCoverUrl" value="${data.cover_url || ''}" required lay-verify="required" placeholder="请输入商品封面图URL" class="layui-input">
                    <div style="margin-top: 10px;">
                        <img id="updatePreviewImage" src="${data.cover_url || ''}" style="max-width: 200px; max-height: 200px; display: ${data.cover_url ? 'block' : 'none'};">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">发货方式描述</label>
                <div class="layui-input-block">
                    <textarea name="delivery_method" required lay-verify="required" placeholder="请输入发货方式描述" class="layui-textarea">${data.delivery_method || ''}</textarea>
                </div>
            </div>
        </form>
        `;

        // 打开弹窗
        var index = layer.open({
            type: 1,
            title: '更新商品',
            content: formHtml,
            area: ['600px', 'auto'],
            btn: ['提交', '取消'],
            success: function (layero) {
                // 刷新表单渲染
                form.render();

                // 监听URL输入变化，实时预览图片
                $('#updateCoverUrl').on('input', function() {
                    var url = $(this).val().trim();
                    if (url) {
                        $('#updatePreviewImage').attr('src', url);
                        $('#updatePreviewImage').show();
                    } else {
                        $('#updatePreviewImage').hide();
                    }
                });
            },
            yes: function (index) {
                // 获取表单数据
                var formData = form.val('updateProductForm');

                // 表单验证
                var isError = false;
                if (!formData.pid) {
                    layer.msg('商品ID不能为空', { icon: 5 });
                    isError = true;
                } else if (!formData.name) {
                    layer.msg('请输入商品名称', { icon: 5 });
                    isError = true;
                } else if (!formData.description) {
                    layer.msg('请输入商品描述', { icon: 5 });
                    isError = true;
                } else if (!formData.points || formData.points < 0) {
                    layer.msg('请输入有效的商品积分', { icon: 5 });
                    isError = true;
                } else if (!formData.stock || formData.stock < 0) {
                    layer.msg('请输入有效的商品库存', { icon: 5 });
                    isError = true;
                } else if (!formData.cover_url) {
                    layer.msg('请上传商品封面图', { icon: 5 });
                    isError = true;
                } else if (!formData.delivery_method) {
                    layer.msg('请输入发货方式描述', { icon: 5 });
                    isError = true;
                }

                if (isError) {
                    return;
                }

                // 发送请求更新商品
                axios({
                    url: '/api/product/update_product/',
                    method: 'POST',
                    data: formData,
                }).then(res => {
                    res = res.data;
                    if (res.code === 0) {
                        layer.msg('商品更新成功', { icon: 6 });
                        layer.close(index);
                        // 刷新表格
                        table.reload('productTable');
                    } else {
                        layer.msg(res.message || '更新失败', { icon: 5 });
                    }
                }).catch(() => {
                    layer.msg('网络错误，请重试', { icon: 5 });
                })
            }
        });
    }

    /**
     * 删除商品功能函数
     * @param {Object} data - 当前商品数据
     * @param {Object} table - layui table 实例
     * @param {Object} layer - layui layer 实例
     */
    function deleteProductFunc(data, table, layer) {
        // 弹出确认框
        layer.confirm('确定要删除该商品吗？', {
            btn: ['确定', '取消']
        }, function (index) {
            // 发送请求删除商品
            axios({
                url: '/api/product/delete_product/',
                method: 'POST',
                data: {
                    pid: data.pid
                },
            }).then(res => {
                res = res.data;
                if (res.code === 0) {
                    layer.msg('商品删除成功', { icon: 6 });
                    // 刷新表格
                        table.reload('productTable');
                    } else {
                        layer.msg(res.message || '删除失败', { icon: 5 });
                    }
                }).catch(() => {
                    layer.msg('网络错误，请重试', { icon: 5 });
                }).finally(() => {
                    layer.close(index);
                })
        });
    }
</script>